<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <input type="text" name="" id="" @keyup="click1">
        <input type="text" name="" id="" @keydown="click1">
        <h3>键盘事件的修饰符</h3>
        <h4>enter 按回车触发</h4>
        <input type="text" name="" id="" @keyup="click2">
        <input type="text" name="" id="" @keyup.enter="click3">
        <h4>delete  按下回退键或删除都可以触发</h4>
        <input type="text" name="" id="" @keyup.delete="click1">
        <h4>ESc</h4>
        <input type="text" name="" id="" @keyup.esc="click1">
        <h4>Space</h4>
        <input type="text" name="" id="" @keyup.space="click1">

        <h4>按tab键 只能绑定keydown否则贯标会去下一个表单元素，导致取值不对</h4>
        <input type="text" name="" id="" @keydown.tab="click4">
        <input type="text" name="" value="1111" @keyup.tab="click4">

        <h4>通过键盘码触发 </h4>
        <input type="text" name="" id="" @keyup.65="click1">
        <h4>通过键盘名触发</h4>
        <input type="text" name="" id="" @keyup.a="click1">
    </div>
    <script>
        /**
         *  keyup:
         *  keydown:
         * 
         */
        new Vue({
            el: '#demo',
            methods:{
                click1(e){
                    console.log('click1')
                    console.log(e.target.value)
                },
                click2(e){
                    if(e.code === 'Enter'){
                        console.log('enter')
                    }
                },
                click3(e){
                    console.log('click3: ', e.target.value)
                },
                click4(e){
                    console.log('click4: ' , e.target.value)
                }
            }
        })
    </script>
</body>

</html>